<template>
  <div class="container">
    <div class="title item">
        <span class="date">提现日期</span>
        <span class="status">状态</span>
        <span class="money">提现金额</span>
    </div>
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getList"
    >
        <div class="item" v-for="(item,index) in list" :key="index">
            <span class="date">{{item.created_at}}</span>
            <span class="status" v-if="item.status==1" >
                待审核
            </span>
            <span class="status red" v-if="item.status==3" >
                已驳回
            </span>
            <span class="status green" v-if="item.status==2">
                已完成
            </span>
            <span class="money moneys">{{Number(item.money).toFixed(2)}}</span>
        </div>
    </van-list>
  </div>
</template>

<script>
export default {
    name:'record',
    data(){
        return{
            loading:false,
            finished:false,
            page:1,
            size:20,
            total:0,
            list:[]
        }
    },
    methods:{
        getList(){
            this.$api.getMoneyList({
                p:'w',
                page:this.page,
                size:this.size,
                api_token:localStorage.api_token
            }).then(res=>{
                this.loading = false;
                this.total = res.data.total;
                this.page = this.page+1;
                if(this.page==1){
                    this.list = res.data.list;
                }else{

                    this.list = [...this.list,...res.data.list];
                }
                this.finished = this.list.length==this.total;
            })
        }
    }
}
</script>

<style scoped>
.container{
    width:100%;
    min-height:100vh;
    background: #fff;
}
.item{
    padding:20px 15px;
    color:#333;
    font-size:14px;
    border-bottom:1px solid #f5f5f5;
    display: flex;
}
.item .moneys{
    color:#cc1c24
}
.item:last-child{
    border-color:transparent;
}
.title{
    font-size:16px;
    font-weight: bold;
}
.item span{
    flex:1;
    text-align: center;
}
.red{
    color:#cc1c24;
}
.green{
    color:green;
}
</style>